<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:replace="top::html"/> <!-- 引入样式 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>专家添加页面</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<body class="fixed hold-transition skin-blue">

	<div class="wrapper">
	
		<!-- 引入表头 -->
		<div th:replace="tophtml::html"></div>
		<!-- 引入左边 -->
		<div th:replace="left::html"></div>

		<!-- 右侧添加功能 -->
		<div class="content-wrapper">
			<!-- 页眉 -->
			<section class="content-header">
				<h1>添加专家<small style="font-weight: bolder;color: black;">（<font color="red">*</font>&nbsp;表示不能为空，联系方式请至少填写一种！）</small></h1>
				<ol class="breadcrumb">
					<li><a href="/index"><i class="fa fa-dashboard"></i>用户中心</a></li>
					<li><a href="/person/findPersonList">专家管理</a></li>
					<li><a href="/person/addView">添加专家</a></li>
				</ol>
			</section>
			<section class="content container-fluid">
				<!-- 表单（添加了表单样式） class="form-inline" -->
				<form id="form1" th:action="@{/person/addPerson}" method="post" enctype="multipart/form-data" th:object="${person}">
					<input type="hidden" id="hello" th:value="${person.pid}">
					<!-- 提醒此人已存在 -->
					<font color="red" style="font-weight: bold;"><input type="hidden" th:utext="${info}"/></font>
					<div class="form-group">
						<label for="name"><font color="red">*</font>姓名</label> 
						<!-- 后台非空验证 -->
						<p style="color: red;" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Error</p>
						<input type="text" name="name" class="form-control" th:value="${person.name}" onchange="selectRole()" placeholder="姓名 ..." required>
					</div>																			<!-- onblur事件:当用户离开输入字段时对其进行验证,在元素失去焦点时触发 -->
					<div class="form-group">
						<label>专业领域</label> 
						<input type="text" name="professionaField" th:value="${person.professionaField}" class="form-control" placeholder="专业领域 ...">
					</div>
					<div class="form-group">
						<label>单位</label> 
						<input type="text" name="unit" th:value="${person.unit}" class="form-control" placeholder="单位 ...">
					</div>
					<!-- 提醒联系方式至少填写一种 -->
					<font color="red" style="font-weight: bold;"><input type="hidden" th:utext="${alert}"/></font>
					<div class="form-group">
						<label><font color="red">*</font>固定电话</label> 
						<input type="text" name="fixedPhone" th:value="${person.fixedPhone}" class="form-control contact" placeholder="固定电话 ...">
					</div>
					<div class="form-group">
						<label><font color="red">*</font>手机</label> 
						<input type="text" name="tell" th:value="${person.tell}" class="form-control contact" placeholder="手机 ...">
					</div>
					<div class="form-group">
						<label><font color="red">*</font>邮箱</label> 
						<input type="text" name="email" th:value="${person.email}" class="form-control contact" placeholder="邮箱 ...">
					</div>
					<div class="form-group">
						<label><font color="red">*</font>微信</label> 
						<input type="text" name="wechat" th:value="${person.wechat}" class="form-control contact" placeholder="微信 ...">
					</div>
					<div class="form-group">
						<label><font color="red">*</font>其他联系方式</label> 
						<input type="text" name="otherContact" th:value="${person.otherContact}" class="form-control contact" placeholder="其他联系方式 ...">
					</div>
					<div class="form-group">
						<label><font color="red">*</font>专家来源</label> 
						<!-- 后台非空验证 -->
						<p style="color: red;" th:if="${#fields.hasErrors('source')}" th:errors="*{source}">Error</p>
						<select name="source" class="form-control">
							<option th:each="psd : ${projecSourcetDictiontryList}" th:value="${psd.pid}" th:text="${psd.worth}"></option>
						</select>
					</div>
					<div class="form-group">
						<label><font color="red">*</font>专家类型</label> 
						<!-- 后台非空验证 -->
						<p style="color: red;" th:if="${#fields.hasErrors('type')}" th:errors="*{type}">Error</p>
						<select name="type" class="form-control">
							<option th:each="psd : ${personTypeList}" th:value="${psd.pid}" th:text="${psd.worth}"></option>
						</select>
					</div>
					<div class="form-group">
						<label><font color="red">*</font>离退休状态</label> 
						<select name="retireStatus" class="form-control">
							<option th:each="dic : ${personRetireDictiontryList}" th:value="${dic.pid}" th:text="${dic.worth}"></option>
						</select>
					</div>
					<div class="form-group">
						<label for="researchField"><font color="red">*</font>所属领域</label>
						<!-- 后台非空验证 -->
						<p style="color: red;" th:if="${#fields.hasErrors('researchField')}" th:errors="*{researchField}">Error</p>
						<div class="checkbox" th:each="rfd : ${researchFieldDictiontryList}">
							<label> 
								<input type="checkbox" name="researchField"
									   th:value="${rfd.names}" th:text="${rfd.worth}"
									   th:checked="${#arrays.contains(researchFieldArr, rfd.names)}"
									   required>
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="domesticOrForeign"><font color="red">*</font>所在地区</label>
						<p style="color: red;" th:if="${#fields.hasErrors('area')}" th:errors="*{area}">Error</p>
						<p style="color: red;" th:text="${domesticOrForeign}"></p>
                        <div class="radio">
                            <label>
                                <input required type="radio" name="domesticOrForeign" id="optionsRadios1" value="0"  th:checked="${person.domesticOrForeign eq 0}"> 国内
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input required type="radio" name="domesticOrForeign" id="optionsRadios2" value="1" th:checked="${person.domesticOrForeign eq 1}"> 国外
                            </label>
                        </div>
                    </div>
                    <div class="form-group form-country">
						<label><font color="red">*</font>国家</label>
						<p style="color: red;" th:text="${area}"></p>
						<select class="form-control form-area">
							<option value="-1"></option>
							<option th:each="list:${countryDictiontryList}" 
									th:selected="${list.pid eq countryId}" th:value="${list.pid}" 
									th:text="${list.worth}">
							</option>
						</select>
					</div>
					<div class="form-group form-area">
						<label><font color="red">*</font>省</label>
						<p style="color: red;" th:text="${area}"></p>
						<select class="form-control form-area" id="provinceId">
							<option value="-1"></option>
							<option th:each="list:${provinceDictiontryList}"
									th:value="${list.names}" th:text="${list.worth}"
									th:selected="${list.names eq province}">
							</option>
						</select>
					</div>
					<div class="form-group form-area">
						<label><font color="red">*</font>市</label> 
						<select class="form-control form-area" id="cityId">
							<option value="-1"></option>
							<option th:each="list:${cityDictiontryList}"
									th:value="${list.names}" th:text="${list.worth}"
									th:selected="${list.names eq city}">
							</option>
						</select>
					</div>
					<div class="form-group form-area">
						<label><font color="red">*</font>区</label> 
						<select class="form-control form-area" id="areaId">
							<option value="-1"></option>
							<option th:each="list:${areaDictiontryList}"
									th:value="${list.names}" th:text="${list.worth}"
									th:selected="${list.names eq district}">
							</option>
						</select>
					</div>
					<div class="form-group">
						<label>性别</label>
						<div class="radio">
							<!-- 女生的value值会和国外的value值重复 value=1 -->
							<label> <input type="radio" name="sex" value="0" th:checked="${person.sex eq 0}">男</label>
							<label> <input type="radio" name="sex" value="1" th:checked="${person.sex eq 1}">女</label>
						</div>
					</div>
					<div class="form-group">
						<label>出生日期</label>
						<div class="input-group date">
							<div class="input-group-addon">
								<i class="fa fa-calendar"></i>
							</div>
							<input type="text" name="birth" th:value="${person.birth}" class="form-control pull-right" id="datepicker">
						</div>
					</div>
					<div class="form-group">
						<label>籍贯</label> 
						<input type="text" name="birthPlace" th:value="${person.birthPlace}" class="form-control" placeholder="省 市 区 ...">
					</div>
					<div class="form-group">
						<label for="exampleInputFile">附件</label> 
						<!-- 将附件annex改为annex1,是为了避免file类型和string类型发生冲突 -->
						<input type="file" name="annex1">
					</div>
					<div class="form-group">
						<label>最高学历</label> 
						<input type="text" name="maxEducation" th:value="${person.maxEducation}" class="form-control" placeholder="最高学历 ...">
					</div>
					<div class="form-group">
						<label>毕业院校及所学专业</label> 
						<input type="text" name="schoolAndMajor" th:value="${person.schoolAndMajor}" class="form-control" placeholder="院校 专业 ...">
					</div>

					<div class="form-group">
						<label>职称</label> 
						<input type="text" name="title" th:value="${person.title}" class="form-control" placeholder="职称 ...">
					</div>
					<div class="form-group">
						<label>教育背景</label>
						<input type="text" class="form-control" th:value="${person.education}" name="education" placeholder="教育背景 ..."/>
					</div>
					<div class="form-group">
						<label>工作经历</label>
						<input type="text" class="form-control" th:value="${person.workExp}" name="workExp" placeholder="工作经历 ...">
					</div>
					<div class="form-group">
						<label>荣誉奖励</label>
						<input type="text" class="form-control" th:value="${person.honorAward}" name="honorAward" placeholder="荣誉奖励 ...">
					</div>
					<div class="form-group">
						<label>科技成果</label>
						<input type="text" class="form-control" th:value="${person.technica}" name="technica" placeholder="科技成果 ...">
					<div class="form-group">
						<label>引用信息来源链接</label>
						<input type="text" class="form-control" th:value="${person.website}" name="website" placeholder="引用信息来源链接 ...">
					</div>
					<div class="form-group">
						<label>人才级别</label>
						<div class="checkbox" th:each="rfd : ${talentLevelDictiontryList}">
							<label> 
								<input type="checkbox" name="talentLevel"
									   th:value="${rfd.names}" th:text="${rfd.worth}"
									   th:checked="${#arrays.contains(talentLevelArr, rfd.names)}">
							</label>
						</div>
					</div>
					<div class="form-group">
						<label>个人简介</label>
						<textarea rows="2" cols="1" class="form-control" th:text="${person.personInfo}" name="personInfo" placeholder="字数在2000以内 ..."></textarea>
					</div>
					<div class="form-group">
						<label>备注1</label> 
						<input type="text" name="remark1" th:value="${person.remark1}" class="form-control" placeholder="备注1 ...">
					</div>
					<div class="form-group">
						<label>备注2</label> 
						<input type="text" name="remark2" th:value="${person.remark2}" class="form-control" placeholder="备注2 ...">
					</div>
					<div class="box-footer">
						<a href="/person/findPersonList" class="btn btn-primary">返回主页面</a>
						<button type="submit" class="btn btn-primary">提交</button>
						<a href="/person/addView" class="btn btn-primary">重置</a>
						<button type="button" class="btn btn-primary" onclick="window.history.go(-1)">返回上一级</button>
					</div>
				</form>
			</section>
			<!-- 置顶按钮 -->
			<a href="#0" class="cd-top">Top</a>
		</div><!-- 右侧添加功能结束 -->
		
		<!-- 引入页脚 -->
		<div th:replace="footer::html"></div>
		<div class="control-sidebar-bg"></div> 
	</div>

	<!-- 引入js -->
	<div th:replace="bottom::html" ></div>
</body>
	<!-- 引入layui脚本 -->
	<script src="/js/layui.all.js"></script>
	<script src="/js/layui.js"></script>
	<script type="text/javascript">
		//选择专家弹层
		function selectRole(){
			//获取专家姓名
			var personName=$("input[name='name']").val();
			//1.显示通过专家姓名查询到的专家列表弹层
			var url = '/person/showselectperson?personName='+personName;
			if(personName == ""){
				return false;
			}
		    $.get(url,function(result){ //通过Ajax发送请求到后台
		    	//如果数据库中没有此人，就不显示弹层
		    	if(result=="noResult"){
		    		return false;
		    	}else{
		    		layer.open({
			            type : 1,   //获取页面层信息
			            title : '选择专家',
			            btn : ['修改','取消'],
			            skin : "layui-layer-molv",
			            border : [1],
			            area : ['50%','50%'],
			            content : result,
			           
	                    yes : function(index, layero) {
	                    	var checkID = [];//定义一个空数组
							$("input[name='check']:checked").each(function(i) {
								//把所有被选中的复选框的值存入数组
								checkID[i] = $(this).val();
							});
	                    	//如果没有勾选
							if(checkID==''){
								return false;
							}
	                    	//如果勾选多个(一个专家的pid字符串是32位)
							if(checkID.toString().length>32){
								alert("只能选择一个联系人！");
								return false;
							}
	                    	//把数组中的所有元素放入一个字符串用逗号隔开
							var checkStr = checkID.join(",");
							$.ajax({
								//2.通过专家pid查询专家返回实体类
								url :'/person/returnCheckperson',
								data : {
									'checkStr' : checkStr
								},
								type : 'get',
								async : true,
								success : function(data) {
									//3.在专家添加页面中回显数据
									window.location.href = "/person/addSelectView?personId="+data.pid;
								} 
							});
							//4.关闭弹出框
					    	layer.close(index); 
						}
					});
		    	}
			});
		}
	</script>
</html>